<template>
	<view v-if="!initUI" class="page tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		<view class="top-bg"></view>
		<dawnBar title="处方签-就诊记录"></dawnBar>
		<view class="page-container" style="padding-bottom: 140rpx;">
			<view class="order--wrap tn-margin-top-sm">
				<!-- 标签内容 -->
				<view class="list">
					<view class="list-item" v-for="(item,index) in list" :key="index">
						<view class="list-head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
							<view @click="navDteail(item)">
								<text class="tn-color-black">挂号单：</text>
								<text class="tn-color-dawn tn-text-lg tn-text-bold">{{ item.NO  || '' }}</text>
							</view>
							<view>
								<view class="justify-content-item ">
									<tn-tag backgroundColor="tn-main-gradient-dawn" fontColor="#FFFFFF"
										shape="circleLeft" width="auto">
										{{ item.ZXZT || ''}}
									</tn-tag>
								</view>
							</view>
						</view>
						<view class="list-content tn-flex tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
							<view class="tn-flex tn-flex-nowrap  tn-flex-col-center tn-flex-row-left">
								<view @click="navDteail(item)" v-if="item.pictures && item.pictures.length > 0">
									<image mode="aspectFill" class="list-content-image" :src="item.pictures[0]">
								</view>
								<view class="">
									<!-- <view>
										<text class="tn-color-black"></text>
										<text class="tn-color-black tn-text-lg tn-text-bold">{{item.name || '' }}</text>
									</view> -->
									<view>
										<text class="tn-color-black">类型：</text>
										<text class="tn-text-bold">{{item.LX || '' }}</text>
									</view>
									<view class="tn-margin-top-ss">
										<text class="tn-color-black">科室：</text>
										<text class="tn-color-dawn tn-text-bold">{{ item.KDKS  || '' }}</text>
										<text class="tn-color-gray tn-padding-left-xs tn-padding-right-xs">|</text>
										<text class="tn-color-black">医生：</text>
										<text class="tn-color-dawn tn-text-bold">{{ item.YSXM  || '' }}</text>
									</view>
								</view>
							</view>

						</view>

						<view class="dawn-line"></view>
						<view
							class=" tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
							<view class="justify-content-item tn-text-df">
								<text class="tn-icon-time-fill tn-color-black"></text>
								<text class="tn-color-black">{{ formatDateTime(item.YYSJ)  || '' }}</text>
							</view>
							<view
								class="tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right op-box">
								<tn-button @click="navDteail(item)" size="sm" class="dawn-btn-sm dawn-btn-sm__pay">
									<text class="tn-icon-send-fill">缴费</text>
								</tn-button>
							</view>
						</view>
					</view>
				</view>

				<!-- 悬浮按钮-->
				<view class="tn-flex tn-footerfixed">
					<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
						<tn-button @click="getData()" class="dawn-btn-lg dawn-btn-lg__main">
							<text class="tn-icon-search-list-fill tn-padding-right-xs"></text>
							<text>查 询</text>
						</tn-button>
					</view>
				</view>
			</view>
			<view v-if="show">
				<dawnMsg :msg="msg"></dawnMsg>
			</view>
		</view>

		<!-- loading -->
		<dawnLoading :show="loading"></dawnLoading>

		<!-- 分页 -->
		<!-- <dawn-pagination ref="pagination" :current="queryData.pageNo" :total="total" @pagination="getData" /> -->

		<!-- 悬浮按钮-->
		<NavBtn></NavBtn>
	</view>

	<view v-else>
		<view class="init-container">
			<view class="top-bg">
				<view class="top-box-img" :style="{backgroundImage:'url('+appConfig.loginBg+')'}"></view>
			</view>
			<view class="container">
				<!-- 流星-->
				<view class="tn-satr">
					<view class="sky"></view>
					<view class="stars">
						<view class="falling-stars">
							<view class="star-fall"></view>
							<view class="star-fall"></view>
							<view class="star-fall"></view>
							<view class="star-fall"></view>
						</view>
						<view class="small-stars">
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
						</view>
						<view class="medium-stars">
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
						</view>
					</view>
				</view>

				<view class="login-container">
					<view class="init-box">
						<image class="init-box--image" mode="aspectFit" :src="appConfig.companyRespVO.logoText"></image>

						<view class="init-box--title">
							<view>{{ appConfig.appTitle }}</view>
						</view>

						<view class="init-box--loading">
							<view class="app-loading-item">
								<view class="app-loading-outter"></view>
								<view class="app-loading-inner"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	import dayjs from '@/plugin/dayjs/dayjs.min.js';
	import * as QrcodepayApi from "@/api/hospital/qrcodepay.js";
	import * as OutpatientApi from "@/api/hospital/outpatient.js";
	import * as api from '@/api/api.js';
	import * as config from "@/api/config.js";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	const app = getApp();

	export default {
		name: 'order',
		mixins: [page_mixin],
		computed: mapGetters(['appConfig', 'uid', 'isLogin', 'userInfo']),
		data() {
			return {
				initUI: true,
				loading: false,
				show: false,
				msg: '',
				queryData: {
					patientId: '0',
					patientName: '-'
				},
				list: []
			}
		},
		async onLoad(options) {
			await this.$onLaunched;
			console.info("prescription onLoad")
			console.table(options)
			if (this.isLogin) {
				this.initUI = false;
			} 
			if (options.hasOwnProperty('patientId')) {
				this.queryData.patientId = options.patientId;
				this.queryData.patientName = options.patientName || '-';
				this.queryData.clinicNo = options.clinicNo || '-';
				this.queryData.cardNo = options.idCardNo || this.queryData.clinicNo;
				this.getData();
			}
			if (options.hasOwnProperty('orderId')) {
				this.queryData.orderNumber = options.orderId;
				this.getQrcodePayDataOld();
				// this.getQrcodePayData();
			}
		},
		methods: {
			getQrcodePayDataOld: function() {
				let that = this;
				this.loading = true;
				this.show = false;
				OutpatientApi.getQrcode(this.queryData).then(res => {
					console.table(res);
					that.loading = false;
					if (res.code === 0) {
						that.queryData.patientId = res.data.patientId;
						that.queryData.patientName = res.data.patientName;
						that.queryData.clinicNo = res.data.clinicNo || '-';
						that.queryData.cardNo = res.data.idCardNo || that.queryData.clinicNo;
						that.getData();
					} else {
						that.show = true;
						that.msg = res.msg;
					}
				}).catch(err => {
					this.loading = false;
					this.show = true;
				})
			},
			getQrcodePayData: function() {
				let that = this;
				this.loading = true;
				this.show = false;
				QrcodepayApi.getQrcodePay(this.queryData).then(res => {
					console.table(res);
					that.loading = false;
					if (res.code === 0) {
						that.queryData.patientId = res.data.patientId;
						that.queryData.patientName = res.data.patientName;
						that.queryData.clinicNo = res.data.clinicNo;
						that.queryData.cardNo = res.data.idCardNo;
						that.getData();
					} else {
						that.show = true;
						that.msg = res.msg;
					}
				}).catch(err => {
					this.loading = false;
					this.show = true;
				})
			},
			getData: function() {
				let that = this;
				this.loading = true;
				this.show = false;
				this.$set(this, 'list', []);
				OutpatientApi.getRegister(this.queryData).then(res => {
					this.loading = false;
					console.table(res);
					if (res.code === 0) {
						const l = res.data.ghList || [];
						this.$set(this, 'list', l);
						if (l.length == 0) {
							this.show = true;
						}
					} else {
						this.show = true;
						this.msg = res.msg;
					}
				}).catch(err => {
					this.loading = false;
					this.show = true;
				})
			},
			navDteail(item) {
				this.queryData.registerNo = item.NO;
				this.queryData.payScene = 'PRESCRIPTIONS_QR_CODE';
				this.$util.setStorageData(config.STORE_KEY.ORDER_REG_NO, this.queryData)
				uni.navigateTo({
					url: '/hosp/outpatient/unpay_recipe'
				})
				// this.$util.setStorageData(config.STORE_KEY.QRCODE_NO, this.queryData)
				// uni.navigateTo({
				// 	url: '/hosp/qrcode/prescription_recipe'
				// })
				
				// uni.navigateTo({
				// 	url: '/hosp/qrcode/prescription_recipe?params=' + JSON.stringify(this.queryData)
				// })
			},
			formatDate: function(date) {
				return dayjs(date).format("YYYY-MM-DD");
			},
			formatDateTime: function(date) {
				return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.init-container {
		// background-image: url('https://yxcp.yncdb.com:444/dawn-traffic/admin-api/infra/file/18/get/884e6353965f941d35c8e48906313c00eedc2010bceeeafc8bc937ea80176e29.png');
		background-size: 100% 100%;
		width: 100vw;
		height: 100vh;
	}

	.init-box {
		z-index: 10000;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 50vh;
		// background-color: $dawn-theme-color-light;
		box-shadow: $dawn-box-shadow;
		border-radius: $dawn-border-radius;

		background-color: rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(6rpx);
		-webkit-backdrop-filter: blur(6rpx);
		border: 2rpx solid rgba(255, 255, 255, 0.1);
		box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);

		&--image {
			border-radius: 8rpx;
			// width: 100%;
			height: 120rpx;
			margin-bottom: 3vh;
		}

		&--title {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 12vh;
			// margin-bottom: 12vh;
			color: $dawn-theme-color;
			font-size: $dawn-font-size-xl;
			font-weight: bolder;
		}

		&--desc {
			color: $dawn-color-grey;
			font-size: $dawn-font-size-md;
			font-weight: bolder;
			margin-top: 30rpx;
		}

		&--check {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;
		}

		&--btn {
			width: 100%;
			display: flex;
			justify-content: center;
		}

		&--loading {
			width: 75%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}


	.init-logo {
		margin-top: - 5vh;
	}

	.init-image {
		border-radius: 8rpx;
		width: 100%;
		height: 150rpx;
	}

	::v-deep .tn-line-progress--active {
		background-color: $dawn-theme-color !important;
	}

	::v-deep .tn-landscape__container {
		top: 60% !important;
	}
	
	
</style>